import React, { useState } from 'react';
import { Form, Input, Button, } from 'antd';
import { useModifyPassword } from './useModifyPassword';

const formItemLayout = {
    labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
    },
    wrapperCol: {
        xs: { span: 24 },
        sm: { span: 8 },
    },
};
const tailFormItemLayout = {
    wrapperCol: {
        xs: {
            span: 24,
            offset: 0,
        },
        sm: {
            span: 16,
            offset: 8,
        },
    },
};

const ModifyPassword: React.FC = () => {
    const { saving, submit } = useModifyPassword()
    const [form] = Form.useForm();

    const onFinish = (values: any) => {
        console.log('Received values of form: ', values);
        const { oldPassword, newPassword } = values
        submit(oldPassword, newPassword)
    };

    return (
        <Form
            {...formItemLayout}
            form={form}
            name="register"
            onFinish={onFinish}
            scrollToFirstError
        >
            <Form.Item
                name="oldPassword"
                label="旧密码"
                rules={[
                    {
                        required: true,
                        message: '请输入旧密码!',
                    },
                ]}
                hasFeedback
            >
                <Input.Password/>
            </Form.Item>

            <Form.Item
                name="newPassword"
                label="新密码"
                hasFeedback
                rules={[
                    {
                        required: true,
                        message: '请输入新密码!',
                    },
                    // () => ({
                    //     validator(_, value) {
                    //         if (checkPassword(value)) {
                    //             return Promise.resolve();
                    //         }
                    //         return Promise.reject('必须包含大小写字母、数字、特称字符，至少8个字符!');
                    //     },
                    // }),
                ]}
            >
                <Input.Password/>
            </Form.Item>

            <Form.Item {...tailFormItemLayout}>
                <Button loading={saving} type="primary" htmlType="submit">
                    修改
                </Button>
            </Form.Item>
        </Form>
    );
}

export default ModifyPassword